﻿<template>
  <div class='container' style='margin-top: 80px'>
    <div class='row'>
      <div class='col-md-8'>
            <h3>课表详情</h3>
            <Timecard />
            <table class='table' style='max-width: 100%' v-html='classTable'>
            </table>
      </div>
      <div class='col-md-4'>
        <div class='card'>
          <div class='card-body'>
            <h4>当前时间</h4>
            <Timecard />
          </div>
        </div>
        <br>
        <div class='card'>
          <div class='card-body'>
            <h4>操作</h4>
            <a href='javascript:;' @click='setStart = formatDate(setStart, -7);classTable = "死命加载中啦";' class='btn btn-light'>&lt;</a><span class="badge badge-primary">{{ dateWrite(formatDate(setStart)) }}</span> ~ <span class="badge badge-primary">{{ dateWrite(formatDate(setStart ,6)) }}</span><a href='javascript:;' @click='setStart = formatDate(setStart, 7);classTable = "死命加载中啦";' class='btn btn-light'>&gt;</a>
          </div>
        </div>
        <br>
        <div class='card'>
          <div class='card-body'>
            <h4>说明</h4>
            <ol>
              <li>彩蛋不见了</li><br>
              <li>表格和时间动态加载的，所以不用刷新哦</li><br>
              <li><span class="badge badge-light">灰色背景表示今天</span></li><br>
              <li><span class="badge badge-danger">红色背景表示正在上的课</span></li><br>
              <li><span class="badge badge-warning">黄色背景表示预备</span></li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Timecard from './Timecard'
export default {
  name: 'Homepage',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      classTable: '死命加载中啦',
      chooseItem: [0, 0],
      setStart: [0, 0],
      period: [{
        startHour: 8,
        startMinute: 0,
        duration: 60
      },
      {
        startHour: 9,
        startMinute: 15,
        duration: 60
      },
      {
        startHour: 10,
        startMinute: 30,
        duration: 60
      },
      {
        startHour: 13,
        startMinute: 30,
        duration: 60
      },
      {
        startHour: 14,
        startMinute: 45,
        duration: 60
      },
      {
        startHour: 16,
        startMinute: 0,
        duration: 60
      },
      {
        startHour: 17,
        startMinute: 0,
        duration: 30
      },
      {
        startHour: 19,
        startMinute: 0,
        duration: 150
      }],
      classes: [{
        name: '家长会',
        Month: 7,
        Date: 17,
        period: 7,
        HomeWork: ['没有布置作业']
      },
     {
        name: '语文',
        Month: 7,
        Date: 20,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 20,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 20,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 20,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 20,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 20,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 20,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 20,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 21,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 21,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 21,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 21,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 21,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 21,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 21,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 21,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 22,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 22,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 22,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 22,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 22,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 22,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 22,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 22,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 23,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 23,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 23,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 23,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 23,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '政治',
        Month: 7,
        Date: 23,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 23,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 23,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 24,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 24,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 24,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 24,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 24,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '历史',
        Month: 7,
        Date: 24,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 24,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 24,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 25,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 25,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 25,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 25,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 25,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '地理',
        Month: 7,
        Date: 25,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 25,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 25,
        period: 7,
        HomeWork: ['没有布置作业']
      },
     {
        name: '语文',
        Month: 7,
        Date: 28,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 28,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 28,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 28,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 28,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 28,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 28,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 28,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 29,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 29,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 29,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 29,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 29,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 29,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 29,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 29,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 30,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 30,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 30,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 30,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 30,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '生物',
        Month: 7,
        Date: 30,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 30,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 30,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 7,
        Date: 31,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 7,
        Date: 31,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 7,
        Date: 31,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 7,
        Date: 31,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 7,
        Date: 31,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '政治',
        Month: 7,
        Date: 31,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 7,
        Date: 31,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 7,
        Date: 31,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 8,
        Date: 1,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 8,
        Date: 1,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 8,
        Date: 1,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 8,
        Date: 1,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 8,
        Date: 1,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '历史',
        Month: 8,
        Date: 1,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 8,
        Date: 1,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 8,
        Date: 1,
        period: 7,
        HomeWork: ['没有布置作业']
      },
      {
        name: '语文',
        Month: 8,
        Date: 2,
        period: 0,
        HomeWork: ['没有布置作业']
      },
      {
        name: '数学',
        Month: 8,
        Date: 2,
        period: 1,
        HomeWork: ['没有布置作业']
      },
      {
        name: '英语',
        Month: 8,
        Date: 2,
        period: 2,
        HomeWork: ['没有布置作业']
      },
      {
        name: '物理',
        Month: 8,
        Date: 2,
        period: 3,
        HomeWork: ['没有布置作业']
      },
      {
        name: '化学',
        Month: 8,
        Date: 2,
        period: 4,
        HomeWork: ['没有布置作业']
      },
      {
        name: '地理',
        Month: 8,
        Date: 2,
        period: 5,
        HomeWork: ['没有布置作业']
      },
      {
        name: '课外活动',
        Month: 8,
        Date: 2,
        period: 6,
        HomeWork: ['没有布置作业']
      },
      {
        name: '作业整理',
        Month: 8,
        Date: 2,
        period: 7,
        HomeWork: ['没有布置作业']
      }]
    }
  },
  computed: {
  },
  methods: {
    choose: function () {
      console.log("233")
    },
    formatNum: function (e) {
      return (e >= 10 ? e : ('0' + e))
    },
    formatDate: function(dt, zl = 0) {
      let monthsDay = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      let b = dt[0]
      let a = dt[1]
      if (b > 0) {
        a = a + zl + monthsDay[b - 1]
        --b
      }
      else
        a += zl
      while (a > monthsDay[b]) {
        a = a - monthsDay[b]
        ++b
      }
      return [b, a];
    },
    dateWrite: function (dt) {
      return dt[0] + '-' + dt[1]
    },
    drawTable: function () {
      let DateObject = new Date()
      let Month = DateObject.getMonth() + 1
      let Day = DateObject.getDate()
      let Hour = DateObject.getHours()
      let Minute = DateObject.getMinutes()
      let Second = DateObject.getSeconds()
      let nowMonth = Month
      let nowDay = Day
      let minMonth = 21474836
      let minDay = Day
      let classes = this.classes
      if (this.setStart[0] == 0 || this.setStart[1] == 0) {
        for (var i = 0; i < classes.length; ++i) {
          if (((classes[i].Month * 32 + classes[i].Date - 6) < (minMonth * 32 + minDay)) && ((classes[i].Month * 32 + classes[i].Date - 6) >= (nowMonth * 32 + nowDay))) {
            minMonth = this.formatDate([classes[i].Month, classes[i].Date], -6)[0];
            minDay = this.formatDate([classes[i].Month, classes[i].Date], -6)[1]
          }
        }
        if (minMonth === 21474836)
          minMonth = Month
        nowMonth = minMonth
        nowDay = minDay
        this.setStart = [nowMonth, nowDay]
      }
      else {
        nowMonth = this.setStart[0]
        nowDay = this.setStart[1]
      }
      let classTable = ''
      classTable += '<thead>'
      classTable += '<tr>'
      classTable += '<td width=1></td>'
      for (var i = 0; i < 7; ++i) {
        if (nowMonth === Month && nowDay + i === Day)
          classTable += '<th width=1 class=thisDay>'
        else
          classTable += '<th width=1>'
        classTable += this.formatDate([nowMonth, nowDay], i)[0]
        classTable += '-'
        classTable += this.formatDate([nowMonth, nowDay], i)[1]
        classTable += '</th>'
      }
      classTable += '</tr>'
      classTable += '</thead>'
      classTable += '<tbody>'
      let period = this.period
      var classMatrix = []
      for (var i = 0; i < period.length; ++i)
        classMatrix[i] = []
      for (var i = 0; i < classes.length; ++i) {
        if (classes[i].Month === nowMonth && classes[i].Date - nowDay >= 0 && classes[i].Date - nowDay < 7)
          classMatrix[classes[i].period][classes[i].Date-nowDay] = classes[i].name
        else {
          let monthsDay = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          let a = classes[i].Month
          let b = classes[i].Date
          --a
          b += monthsDay[a]
          if (a == nowMonth && b - nowDay >= 0 && b - nowDay < 7)
            classMatrix[classes[i].period][b-nowDay] = classes[i].name
        }
      }
      for (var i = 0; i < period.length; ++i) {
        let endHour = period[i].startHour
        let endMinute = period[i].startMinute
        endHour += Math.floor(period[i].duration / 60);
        endMinute += period[i].duration % 60
        classTable += '<tr>'
        classTable += '<th>'
        classTable += (period[i].startHour>=10?period[i].startHour:('0'+period[i].startHour)) + ':' + (period[i].startMinute>=10?period[i].startMinute:('0'+period[i].startMinute))
        classTable += '-'
        classTable += (endHour>=10?endHour:('0'+endHour)) + ':' + (endMinute>=10?endMinute:('0'+endMinute))
        classTable += '</th>'
        for (var j = 0; j < 7; ++j) {
          if ((nowMonth === Month && nowDay + j === Day) && (endHour * 60 + endMinute > Hour * 60 + Minute) && (period[i].startHour * 60 + period[i].startMinute <= Hour * 60 + Minute) && classMatrix[i][j])
            classTable += '<td class=active>'
          else if ((nowMonth === Month && nowDay + j === Day) && (endHour * 60 + endMinute > Hour * 60 + (Minute + 5)) && (period[i].startHour * 60 + period[i].startMinute <= Hour * 60 + (Minute + 5)) && classMatrix[i][j])
            classTable += '<td class=laterActive>'
          else
            if (nowMonth === Month && nowDay + j === Day)
              classTable += '<td class=thisDay>'
            else
              classTable += '<td>'
          classTable += '<span v-on:click="chooseItem = ['+i+', '+j+']">'
          if (classMatrix[i][j]) {
            classTable += classMatrix[i][j]
          }
          else {
            classTable += '<span class=grey>空</span>'
          }
          classTable += '</span>'
          classTable += '</td>'
        }
        classTable += '</tr>'
      }
      classTable += '</tbody>'
      return classTable
    }
  },
  components: {
    Timecard
  },
  mounted () {
    let _this = this
    this.timer = setInterval(() => {
      _this.classTable = _this.drawTable()
    }, 500)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
html, body {
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}
.thisDay {
  background-color: #d3d3d3;
}
.active {
  background-color: #db2828;
  color: white;
}
.laterActive {
  background-color: yellow;
}
.grey {
  color: #aaa;
}
td {
  height: 1rem !important;
  max-height: 1rem;
  overflow: hidden;
}
</style>
